<template>
  <div class="container">
    <Commons></Commons>
    <div class="headerB"><HeaderCom></HeaderCom></div>
    <div class="box">
      <div class="left"><FooterCom></FooterCom></div>
      <div class="right"><MainCom></MainCom></div>
    </div>
    <div class="footerB"><NavCom></NavCom></div>
  </div>
</template>

<script>
import HeaderCom from './components/HeaderCom.vue'
import NavCom from './components/NavCom.vue'
import MainCom from './components/MainCom.vue'
import FooterCom from './components/FooterCom.vue'

export default {
  // name:'',
  components: {
    HeaderCom,
    NavCom,
    MainCom,
    FooterCom,
    
  },
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>

<style lang='less'  scoped>
.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  .footerB{
    height: 200px;

  }
  .headerB{
    height: 200px;

  }
  .box {
    flex: 1;
  display: flex;
  .left {
    background-color: antiquewhite;
    flex: 1;
  }
  .right {
    background-color: pink;
    flex: 1;
  }
}
}
</style>
